<template>
  <article class="page">
    <headerbar>{{title}}</headerbar>
      <!--选择收藏-->
      <section class="d-scroll mgt-2">
        <section class="people-list ">
          <div @click="goDetail(item)" v-for="item in list" class="people-item block noborder">
            <span @click.stop="select(item)" class="span-my"><span :class="{'icon-radio-checked':selectedIndexOf(item)>=0}" class="icon-radio"></span></span>
            <div class="item" >
              <div class="img" v-if="false">
                <img src="../../../../static/images/user_bg.jpg" alt="" />
              </div>
              <div class="cont">
                <h2 class="title">{{ item.title }}</h2>
                <div class="tip">
                  <span>{{ getTime(item.createTime) }}</span>
                </div>
              </div>
            </div>
          </div>
        <p class="pdv-5"></p>
        <p class="pdv-5"></p>
        </section>
      </section>
      <section class="foot-action">
        <div class="inner">
          <span @click="checkAll()" class="text"><span :class="{'icon-radio-checked':checkedList.length==list.length}" class="icon-radio"></span> <span>&nbsp;全选</span></span>
          <!-- <span  v-if="isRadio"></span> -->
          <div class="btn" @click="save()">
            <div class="default-block-btn">确定</div>
          </div>
        </div>
      </section>
  </article>
</template>


<script>
  import tools from '@/utils/tools'
  import moment from "moment";
  export default {
    name: 'collectionSelection',
    data () {
      return {
        list: [],
        checkedList: [],
        title: '',
      }
    },
    created () {
      this.loadData();
    },
    mounted() {
      this.checkedList = this.$store.state.selectCollectList || [];
    },
    methods: {
      loadData () {
        this.title = '选择收藏'
        return this.getMyCollection()
      },
      // 获取我的收藏
      getMyCollection () {
        let data = {
          pageNo: 1,
          pageSize: "2000",
        };
        this.tools.showLoading()
        this.fetchService.myCollectionPage(data).then((res) => {
          this.tools.hideLoading()
          if (res.code === 0) {
            this.list = res.data
          } else {
            this.tools.tip(res.message)
          }
        });
      },
      checkAll () {
        if (this.checkedList.length === this.list.length) {
          this.checkedList = []
        } else {
          this.checkedList = [].concat(this.list)
        }
      },
      selectedIndexOf (item) {
        let index = -1
        this.checkedList.some((v, i) => {
          if (item.id === v.id) {
            index = i
            return false
          }
        })
        return index
      },
      getTime(createTime) {
        return moment(createTime).format("YYYY年MM月DD日");
      },
      goDetail(item) {
        console.log(item)
        if (item.newsType == 1) {// 新闻类型(0图文;1长视频;2音频;3短视频)
          this.$store.state.isVideo = true
          this.$store.state.videoDetail = item
          this.$store.state.newsDetail = item
          // 缓存专辑数据
          // this.$store.state.zhuanjiList = this.list
          // 带上专辑标识，详情页进行连续播放
          this.$router.push({name: 'videoDetail', query: {id: item.contentId}})
        }else if (item.newsType == 2 ) {
          this.$store.state.isVideo = false
          this.$store.state.videoDetail = item
          this.$store.state.newsDetail = item
          this.$router.push({name: 'videoDetail', query: {id: item.contentId}})
        }else if (item.newsType == 3 ) {
          this.playVideo(item);
        }else{
          this.$store.state.tempListData = this;
          this.$store.state.newsDetail = item;
          this.$router.push({
            name: "myCollectionDetail",
            params: { id: item.contentId },
          });
        }
        /*this.$store.state.tempListData = this;
        this.$store.state.newsDetail = item;
        this.$router.push({
          name: "myCollectionDetail",
          params: { id: item.contentId },
        });*/
      },
      select (item) {
        let index = this.selectedIndexOf(item)
        if (index >= 0) {
          this.checkedList.splice(index, 1)
        } else {
          this.checkedList.push(item)
        }
      },
      save () {
        console.log('checkedList',this.checkedList)
        this.$store.state.selectCollectList = this.checkedList;
        this.tools.tip("选择成功")
        tools.back()
      },
    }
  }
</script>

<style scoped lang="scss">
  .search {
    input {
      height:60px;
      line-height:60px;
      font-family:dang;
      margin:0;
      font-size:14PX;
    }
  }
  .span-my{
    padding-right: 2%;
  }
  .people-list .people-item {
    justify-content: flex-start;
  }
  .foot-action .inner .text {
    padding-left: 1%;
  }
  .block .title {
    line-height: inherit;
    display: -ms-flexbox;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 15PX;
    color: #333333;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
  }
</style>
